<template>
  <div class="XnyCrud defaultBox">
    <!-- <el-button @click="test">test</el-button> -->

    <!-- 搜索栏 -->
    <oce-search
      ref="oceSearch"
      v-if="$ocean.vaildData(option.showSearch, config.crud.showSearch)"
      v-model="crudSearch"
      v-bind="$attrs"
      v-on="$listeners"
      :option="option"
      :column="column"
      :show-search="showSearch"
    >
      <template v-for="item in searchSlotList" #[item.name]="scope">
        <slot :name="item.name" v-bind="scope" /> </template
    ></oce-search>

    <!-- crud中column属性因当前项目不需要，未处理子组件修改父组件问题 -->
    <!-- 工具栏 -->
    <oce-toolbar
      v-bind="$attrs"
      v-on="$listeners"
      v-if="$ocean.vaildData(option.showToolbar, config.crud.showToolbar)"
      :option="option"
      :show-search.sync="showSearch"
      :column-option="columnOption"
      @refresh="$emit('on-load')"
    >
      <!-- 左侧插槽 -->
      <template #menuLeftTop="scope">
        <slot name="toolbar-menu-left-top" v-bind="scope"></slot>
      </template>
      <template #menuLeft="scope">
        <slot name="toolbar-menu-left" v-bind="scope"></slot>
      </template>
    </oce-toolbar>

    <!-- 表格顶部插槽 -->
    <slot name="table-top" />

    <!-- 表格栏 -->
    <xny-vxe-table
      v-bind="$attrs"
      v-on="$listeners"
      v-if="showTable"
      ref="xnyVxeTable"
      :data="data"
      :column="column"
      :option="option ? option.tableOption || {} : {}"
    >
      <!-- 数据列插槽 -->
      <template v-for="item in tableSlotList" #[item.name]="scope">
        <slot :name="item.innerName" v-bind="scope" />
      </template>
      <!-- 操作列插槽 -->
      <template #menuLeft="scope">
        <slot name="table-menu-left" v-bind="scope"></slot>
      </template>
      <template #menuRight="scope">
        <slot name="table-menu-right" v-bind="scope"></slot>
      </template>
    </xny-vxe-table>

    <!-- 分页栏 -->
    <oce-pagination
      :page.sync="crudPage"
      @current-change="updatePage"
      @size-change="updatePage"
      v-if="$ocean.vaildData(option.showPage, config.crud.showPage)"
    ></oce-pagination>
  </div>
</template>

<script>
import config from '../../config'

export default {
  name: 'XnyCrud',
  data() {
    return {
      config,
      showSearch: true,
      pageInit: false,
      crudSearch: {},
      crudPage: {},
      showTable: true,
    }
  },
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    column: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    page: {
      type: Object,
      default: () => ({ total: 0, currentPage: 1 }),
    },
    search: {
      type: Object,
      default: () => ({}),
    },
    // 多表列配置
    columnOption: Object,
  },
  components: {},
  watch: {
    crudSearch: {
      handler(val, oldVla) {
        if (val != oldVla) this.$emit('update:search', val)
      },
    },
    search: {
      handler(val) {
        if (val != this.crudSearch) this.crudSearch = val
      },
    },
    page: {
      handler() {
        this.syncPage()
      },
      deep: true,
    },
  },
  computed: {
    // 搜索框插槽
    searchSlotList() {
      const slotList = []
      let slotName
      let tempSlot
      const searchList = this.column.filter((el) => el.search)
      searchList.forEach((search) => {
        slotName = `search-${search.prop}`
        if (this.$scopedSlots[slotName]) {
          tempSlot = {
            name: slotName,
            label: search.label,
            prop: search.prop,
            type: 'search-item',
          }
          slotList.push(tempSlot)
        }
      })
      // console.log(slotList)
      return slotList
    },
    // 表格插槽
    tableSlotList() {
      const slotList = []
      let slotName
      let tempSlot
      this.column.forEach((el) => {
        if (el.search) return
        slotName = `table-${el.prop}`
        if (this.$scopedSlots[slotName]) {
          tempSlot = {
            name: el.prop,
            innerName: slotName,
            label: el.label,
            prop: el.prop,
            type: 'column-item',
          }
          slotList.push(tempSlot)
        }
      })
      return slotList
    },
  },
  methods: {
    test() {
      const name = 'search-1'
      this.$nextTick(() => {
        console.log(333, this.$scopedSlots[name])
      })
    },
    // 获取数据，可以指定索引获取数据
    getData(rowIndex) {
      return this.$refs.xnyVxeTable.getData(rowIndex)
    },
    // 设置行为选中状态，第二个参数为选中与否
    setCheckboxRow(rows, checked) {
      this.$refs.xnyVxeTable.setCheckboxRow(rows, checked)
    },
    // 刷新表格
    refreshTable() {
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
    },
    // 搜索框填入默认值（有值的不填）
    setSearchDefault() {
      this.$refs?.oceSearch?.setFormDefault()
    },
    syncPage() {
      this.crudPage = this.page
    },
    updatePage() {
      this.$emit('update-page', this.crudPage)
      this.$emit('on-load', { page: this.crudPage })
    },
  },
  created() {},
  mounted() {
    // let name = 'search-1'
    // this.$nextTick(() => {
    //   console.log(333, this.$scopedSlots[name])
    // })
    // this.$emit('on-load', { page: this.crudPage })
  },
}
</script>

<style scoped lang="scss">
.XnyCrud {
  // position: relative;
}
.defaultBox {
  // padding: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
